<template>
  <div class="menu-content">
    <el-menu
      :default-active="state.activeMenu"
      text-color="#7F8FAB"
      class="custom-menu"
      active-text-color="#FFFFFF"
      background-color="rgba(36, 38, 47, 0)"
      mode="horizontal"
      @select="jump">
      <subMenu :menuData="state.menuData"></subMenu>
    </el-menu>
  </div>
</template>

<script setup>
  import { computed, reactive } from 'vue'
  // import {useStore} from 'vuex'
  import { useRouter, useRoute } from 'vue-router'
  import subMenu from './subMenu.vue'

  const router = useRouter()
  const route = useRoute()
  // const {getters} = useStore();
  const state = reactive({
    isCollapse: true,
    // menuData: getters['userMessage/getMenuList'],
    menuData: [
      {
        id: '432',
        menuCode: '0049001',
        menuName: '监测中心',
        url: 'situationMonitoring',
        icon: '',
        menuType: 1,
        subType: 0,
        childList: [
          {
            id: '4321',
            menuCode: '00490011',
            menuName: '态势监测',
            url: 'situationMonitoring',
            icon: '',
            menuType: 1,
            subType: 0
          },
          {
            id: '4322',
            menuCode: '00490012',
            menuName: '模型运行监测',
            url: 'modelMonitoring',
            icon: '',
            menuType: 1,
            subType: 0
          }
        ]
      },
      {
        id: '434',
        menuCode: '0049003',
        menuName: 'AI智能搜索',
        url: 'intelligentSearch',
        icon: '',
        menuType: 1,
        subType: 0
      },
      {
        id: '436',
        menuCode: '0049005',
        menuName: 'AI咨询',
        url: 'aiChat',
        icon: '',
        menuType: 1,
        subType: 0
      },
      {
        id: '435',
        menuCode: '0049004',
        menuName: '数据分析管理',
        url: 'dataAnalysisManage',
        icon: '',
        menuType: 1,
        subType: 0
      },
      {
        id: '436',
        menuCode: '0049005',
        menuName: '配置管理',
        url: '',
        icon: '',
        menuType: 1,
        subType: 0,
        childList: [
          {
            id: '4361',
            menuCode: '00490051',
            menuName: '任务管理',
            url: 'taskManage',
            icon: '',
            menuType: 1,
            subType: 0
          },
          {
            id: '4362',
            menuCode: '00490052',
            menuName: '算法管理',
            url: 'algorithmManage',
            icon: '',
            menuType: 1,
            subType: 0
          },
          {
            id: '4363',
            menuCode: '00490053',
            menuName: '设备管理',
            url: 'deviceManage',
            icon: '',
            menuType: 1,
            subType: 0
          },
          {
            id: '4364',
            menuCode: '00490054',
            menuName: '主控机管理',
            url: 'masterControllerManage',
            icon: '',
            menuType: 1,
            subType: 0
          }
        ]
      },
      
    ],
    activeMenu: computed(() => {
      return route.name
    })
  })

  const jump = url => {
    if (url === '') return
    router.push(url)
  }
</script>
<style scoped lang="scss">
  .menu-content {
    position: absolute;
    // left: pxTvw(463-24);
    left: 50%;
    transform: translateX(-50%);
    height: pxTvh(56);
    top: pxTvh(1);
    flex: 1;
    :deep(.el-menu) {
      height: 100%;
      border-bottom: none;
      .el-menu-item {
        margin: 0 pxTvw(24);
        padding: 0 pxTvw(3);
        @include computed_font(14);
        line-height: pxTvh(46);
        em {
          margin-right: pxTvw(10);
          @include computed_font(18);
        }
      }
      .el-menu-item.is-active {
        border-bottom: 4px solid #dceafe;
      }
      .el-menu-item.is-disabled {
        opacity: 0.5;
      }
      .el-menu-item:hover {
        color: #ffffff;
      }
      .el-sub-menu {
        margin: 0 pxTvw(24);
        .el-sub-menu__icon-arrow {
          right: -15px;
          display: none;
        }
        .el-sub-menu__title {
          padding: 0 pxTvw(3);
          @include computed_font(14);
          line-height: pxTvh(46);
          border-bottom: 2px solid transparent;
          em {
            margin-right: pxTvw(10);
            @include computed_font(18);
          }
        }
      }
      .el-sub-menu.is-active {
        .el-sub-menu__title {
          border-bottom: 4px solid #ffffff;
        }
      }
    }
  }
</style>
<style lang="scss">
  //下拉样式
  .el-menu--horizontal {
    --el-menu-border-color: rgba(0, 0, 0, 0);
    border: unset;
    .el-menu {
      --el-menu-bg-color: #0A1328 !important;
      --el-menu-hover-text-color: #6aa1ff !important;
      .el-menu-item {
        padding: pxTvh(0) pxTvw(40) pxTvh(0) pxTvw(20);
        @include computed_font(14);
        margin: pxTvh(4) pxTvw(4) pxTvh(0) pxTvw(4);
        height: pxTvh(48);
      }
      .el-menu-item.is-active {
        background: #165DFF;
        border-radius: 2px;
      }
      .el-menu-item.is-active::after {
        content: '';
        position: absolute;
        left: pxTvw(24);
        bottom: 2px;
        right: 0;
        height: 2px;
        width: calc(100% - #{pxTvw(48)});
        // background-color: var(--el-menu-active-color);
      }
    }
    .el-menu--popup {
      padding: 0;
      min-width: pxTvw(104);
    }
  }
</style>
